<template>
  <view class="goods-list">
    <!-- 搜索功能区域 -->
    <view class="sousuo" :style="{'margin-left': isShowFocus?'5%':'','width':width}">
      <view class="sousuo_ico"><text class="iconfont icon-sousuo"></text></view>
      <view class="sousuo_input"><input type="text" @focus="onFocusInput" @blur="onBlurInput"
          placeholder-class="sousuo_placeholder" v-model="inpuval" :placeholder="placeholder" /></view>
      <view class="sousuo_cances" @click="inputCances" v-if="isShowFocus">搜索</view>
    </view>

    <view v-for="(goods, i) in goodsList" :key="i">
      <navigator class="g-content" :url="'/pages/shop/shopDetail/shopDetail?id='+goods.id">
        <view class="g-img">
          <image :src="goods.img" mode="" style="width: 100%;height: 100%;"></image>
        </view>
        <view class="g-text">
          <view class="g-text-title">
            <text>{{ goods.name.length>=12 ? goods.name.substring(0,10)+'..' : goods.name}}</text>
          </view>
          <view class="g-text-store">
            <text
              style="font-size: 20rpx;">{{ goods.introduction.length>=12 ? goods.introduction.substring(0,30)+'..' : goods.introduction}}</text>
          </view>
          <view class="g-text-price">
            <view class="g-text-price-left">
              <view><text>￥</text><text style="font-size: 40rpx;">{{goods.price}}</text></view>
              <view class="g-text-store"><text style="font-size: 20rpx;">库存：{{goods.store}}</text>
              </view>
            </view>
            <view class="g-text-price-right">
              <text>立即选购</text>
            </view>
          </view>
        </view>
      </navigator>
    </view>
    <uni-section>
      <uni-load-more status="没有更多了" />
    </uni-section>
  </view>
</template>

<script>
  export default {
    name: "searInput",
    props: {
      placeholder: {
        type: String,
        default: "请输入名称"
      }
    },
    data() {
      return {
        isShowFocus: false,
        inpuval: '',
        width: "90%",
        status: 'more',
        pageNum: 1,
        pageSize: 6,
        goodsName: '',
        goodsList: [],
        user: undefined,
        extraIcon: {
          color: '#4cd964',
          size: '22',
          type: 'gear-filled'
        }
      }
    },
    onShow() {
      this.load()
    },
    onReachBottom() {
      this.pageSize++
      this.load()
    },
    methods: {
      gotoDetail(id) {
        console.log(id)
      },
      load() {
        this.user = uni.getStorageSync('user')
        this.request({
          url: '/goods/findGoods',
          method: 'GET',
          data: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            name: this.goodsName
          },
        }).then(res => {
          this.goodsList = res.data.records
        })
      },
      //搜索
      onFocusInput: function(event) {
        this.isShowFocus = true;
        this.width = "80%";
        this.$emit("focus")
      },
      onBlurInput: function(event) {
        this.goodsName = this.inpuval;
        this.load()
        this.$emit("blur")

      },
      inputCances: function() {
        this.isShowFocus = false;
        this.goodsName = this.inpuval;
        this.load()
        this.width = "90%"
        this.$emit("cancel");
      }
    }
  }
</script>

<style lang="scss">
  .g-content {
    display: flex;
    justify-content: space-evenly;
    width: 100%px;
    height: 300rpx;
    margin: 15rpx;
    overflow: hidden;
  }

  .g-img {
    overflow: hidden;
    border-radius: 15rpx;
    margin: 4rpx;
    flex: 1;
  }

  .g-text {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin: 4rpx;
    flex: 1;
  }

  .g-text-title {
    color: black;
  }

  .g-text-store {
    color: #666666;
  }

  .g-text-price {
    margin-top: 40rpx;
    color: orangered;
    display: flex;
    justify-content: space-between;
  }

  .sousuo {
    display: flex;
    align-content: center;
    align-items: center;
    background-color: #f3f3f3;
    padding: 5px 0;
    margin-left: 5%;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 5px;

    .sousuo_ico {
      width: 10%;
      text-align: center;
    }

    .sousuo_input {
      width: 90%;

      input {
        font-size: 10px;
        letter-spacing: 1px;
      }

      .sousuo_placeholder {
        font-size: 10px;
        color: #7E7E7E;
      }
    }

    .sousuo_cances {
      position: absolute;
      width: 93%;
      text-align: right;
      font-size: 15px;
      color: #3c9cff;
    }
  }
</style>
